<template>
    <bi-form >
        <bi-form-item label="数据库">
            <bi-select v-model="config" required style="margin-bottom:10px;" :clear="false">
                <bi-select-option  v-for="item in configList" :key="item.value" :value="item.value" :label="item.label" ></bi-select-option>
            </bi-select>
        </bi-form-item>
        <!--
        <bi-form-item label="模型名称">
            <bi-input v-model="model" required placeholder="请输入模型名称" ></bi-input>
        </bi-form-item>
        -->
        <bi-table :data="tableList" height="300" :loading="loading" radio  class="border raduis" @radio-change="select" >
            <bi-table-column label="表名" name="table" width="150" ></bi-table-column>
            <bi-table-column label="备注" name="comment"  ></bi-table-column>
            <bi-table-column label="操作" width="150px" v-slot="scope">
                <bi-button  type="primary" @click="bind(scope.row)">绑定</bi-button>
            </bi-table-column>
        </bi-table>
    </bi-form>
</template>

<script>
import modelEditDialog from './model-edit-dialog.vue';
export default{
    dialog:{
        title:'将表绑定到模型',
        width:600,
        loading:true,
        okButton:false
    },
    data(){
        return {
            config:'',
            configList:[],
            tableList:[],
            loading:true,
            model:'',
            table:null
        }
    },
    props:{
        app:String
    },
    watch:{
        config(val){
             this.flashTable(val);
        }
    },
    methods:{

        bind(row){
            this.$dialog({
                title:'绑定模型',
                type:'vue',
                content:admin.createApp(modelEditDialog,{
                    app:this.app,
                    config:this.config,
                    item:{
                        table:row.table,
                        comment:row.comment,
                    },
                })
            })
        },
        select(row){
            if (row==null)  {
                this.model = '';
                this.table = null;
                return;
            }

            function capitalizeAfterUnderscore(app,str) {
              
                if (str.indexOf(app+'_')===0){
                    //删除前面的字符串
                    str = str.substr((app+'_').length);
                    
                }


                str = str.charAt(0).toUpperCase() + str.slice(1);

                return str.replace(/_([a-z])/g, function (_, char) {
                    return char.toUpperCase();
                });
            }

            // 假设 row.table 的值是一个带有下划线的字符串
            this.model = capitalizeAfterUnderscore(this.app,row.table);

           // this.model = row.table;
            this.table =  row;
        },
        dialogOk(){
            
            if (this.table==null){
                this.$alert('请选择表名');
                return false;
            }
            this.dialog.loading = true;
            this.$ajax({
                url:this.$url({controller:'database',action:'addModel'}),
                data:{
                    app:this.app,
                    config:this.config,
                    table:this.table.table,
                    comment:this.table.comment,
                    model:this.model
                },
                success:(res)=>{
                    this.dialog.callback();
                    this.dialog.close();
                    this.dialog.loading = false;
                },
                over:()=>{
                    this.dialog.loading = false;
                }
            })

            return false;
        },
        flashTable(val){
            this.loading = true;
            this.$ajax({
                url:this.$url({controller:'database',action:'tableList'}),
                data:{
                    app:this.app,
                    name:val
                },
                success:(res)=>{
                    this.tableList = res;
                    this.loading = false;
                }
            })
        }
    },
    mounted(){
        this.$ajax({
            url:this.$url({controller:'database',action:'configList'}),
            data:{
                app:this.app
            },
            success:(res)=>{
                
                if (res.length>0){
                    this.configList = res;
                
                    res.forEach(element => {
                        if (element.default){
                            this.config = element.value;
                        }
                    });
                }

                this.dialog.loading = false;
            }
        })
    }
}
</script>